<template>
    <div class="customSelect">
        <el-upload
                class="avatar-uploader"
                :show-file-list="true"
                :before-upload="beforeAvatarUpload"
                :drag="eleData.drag"
                :accept="eleData.accept"
                :multiple="eleData.multiple"
                :file-list="fileList"
        >
            <tempalate v-if="eleData.drag">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    Drop file here or <em>click to upload</em>
                </div>
            </tempalate>
            <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import { ElMessage } from 'element-plus'
    import type {
        UploadFile,
        ElUploadProgressEvent,
        ElFile,
    } from 'element-plus/es/components/upload/src/upload.type'
    import request from "@/renderer/utils/request";
    export default defineComponent({
        name: 'customupload',
        props:{
            eleData:{
                type:Object
            },
            formData:{
                type: Object
            }
        },
        setup(props,ctx) {
            const beforeAvatarUpload = (file: ElFile) => {
                if(!props.eleData) return  false
                console.log(file)
                if (props.eleData.size &&  file.size / 1024 / 1024 > props.eleData.size) {
                    ElMessage.error('文件超出限制' + props.eleData.size + 'MB')
                    return false
                }
                const formData = new FormData()
                formData.append('file',file)
                formData.append('type','file')
                request({
                    url:props.eleData.url,
                    method:'post',
                    data:formData
                }).then(res=>{
                    console.log(res)
                    fileList.value.push({
                        "name" : file.name,
                        "url" : res.data
                    })
                    if(!props.formData || !props.eleData) return
                    props.formData[props.eleData.key] = fileList.value
                })

                return false
            }
            const fileList = ref([]);
            return {fileList,beforeAvatarUpload};
        },
    });
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
